<template>
  <div class="bg-login flex justify-center items-center">
    <div class="bg-f1 w-[340px] p-5 rounded-lg shadow flex flex-col">
      <div class="mb-5 flex items-center">
        <div>{{$t('routes.login.login')}}</div>

        <div class="ml-auto">
          <LocalePicker :reload="true" />
        </div>
      </div>

      <a-form
        :model="formState"
        :rules="rules"
        layout="vertical"
        @finish="handleFinish"
        @finishFailed="handleFinishFailed"
      >
        <a-form-item :label="$t('routes.login.accountLabel')" name="phoneNumber">
          <a-input v-model:value="formState.phoneNumber" :maxlength="11" :placeholder="$t('routes.login.accountPlaceholder')" />
        </a-form-item>
        <a-form-item :label="$t('routes.login.passwordLabel')" name="smsCode">
          <a-input v-model:value="formState.smsCode" :placeholder="$t('routes.login.passwordPlaceholder')" />
        </a-form-item>
        <a-form-item>
          <a-button :block="true" :loading="loading" html-type="submit" type="primary">{{ $t('routes.login.submitLabel') }}</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue' // 引入CompositionApi
import { to } from '@/utils/awaitTo' // 工具库
import { useUserStore } from '@/store/modules/user'
import { message } from 'ant-design-vue' // 引入Antd
import { useRoute, useRouter } from 'vue-router'
import { LocalePicker } from "@/components/basic/locale-picker";
import {useI18n} from "@/hooks/useI18n";

const { t } = useI18n()

// 实例化
const route = useRoute()
const router = useRouter()
const useUser = useUserStore()  // 引入user


const formState = reactive({
  username: '',
  password: '',
  remember: true,
  isPassowrd: false,
  checked: false,
  isSwitch: true,
  loading: false,
  isHistory: false,
  phoneNumber: '',
  smsCode: '',
  isClientLogin: false
}) // 表单数据¬
const loading = ref(false) // 登录按钮加载状态
const rules = { // 表单验证规则
  phoneNumber: [
    { required: true, message:  t('routes.login.accountPlaceholder'), trigger: 'blur' },
    // { pattern: /^1[23456789]\d{9}$/, message: t('routes.login.accountRules'), trigger: 'blur' }
  ],

  smsCode: [
    { required: true, message: t('routes.login.passwordPlaceholder'), trigger: 'blur' },
    { pattern: /^\d{4}$/, message: t('routes.login.passwordRules'), trigger: 'blur' }
  ]
}

const handleFinish = async (values: typeof formState) => {
  loading.value = true
  values = Object.assign(values, {
    isClientLogin: formState.isClientLogin
  })
  const [err] = await to(useUser.login(values))
  if (err) {
    // Modal.error({
    //   title: () => '提示',
    //   content: () => err.message,
    // });
    // updateCaptcha();
  } else {
    message.success('登录成功！')
    setTimeout(() => router.replace((route.query.redirect as string) || '/'))
  }
  loading.value = false
}

const handleFinishFailed = (errors) => {
  console.log(errors)
}


</script>

<style lang="less" scoped>
.bg-login {
@apply w-screen h-screen;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
